<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <style>
        .container {
            margin-top: 50px;
        }
    </style>
</head>

<body>
<div class="container" id="app">
    <form class="form-inline">
        <div class="form-group">
            <label for="">id</label>
            <input type="text" class="form-control" v-model="id">
        </div>
        <div class="form-group">
            <label for="">名称</label>
            <input type="email" class="form-control" v-model="name">
        </div>
        <button type="submit" class="btn btn-default" @click.prevent="add">添加</button>
    </form>

    <table class="table table-striped">
        <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in list" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.time}}</td>
            <td>
                <!-- <a href="#" @click.prevent="del(index)">删除</a> -->
                <a href="#" @click.prevent="del(item.id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            list: [
                {id: 1, name: '宝马', time: new Date()},
                {id: 2, name: '奔驰', time: new Date()},
                {id: 3, name: '奥迪', time: new Date()},
            ]
        },
        methods: {
            add: function () {
                this.list.push({
                    id: this.id,
                    name: this.name,
                    time: new Date()
                })
            },
            del: function (id) {
                for (let i = 0, len = this.list.length; i < len; i++) {
                    if (this.list[i].id === id) {
                        this.list.splice(i, 1);
                        break;
                    }
                }

            }
        }
    })
</script>
</body>

</html>